@import "components/common/_variables.scss";

.modal-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    &__backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.75);
        z-index: 1001;
    }
    &__wrap {
        padding: 50px;
        background: $color-inverse;
        z-index: 1002;
        position: relative;
        overflow: auto;
        h3 {
            margin-top: 0;
        }
    }
    &__close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        color: $color-main;
        font-size: $font-size-h2;
        text-decoration: none;
        &:hover {
            color: $color-alt;
        }
    }
}
